<template>
  <v-app-bar color="info" :elevation="10" rounded>
    <template v-slot:prepend>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
    </template>

    <template v-slot:append>
      <v-btn icon="mdi-dots-vertical"></v-btn>
    </template>
    <v-app-bar-title>彬晖能源管理系统</v-app-bar-title>

    <v-btn
      v-for="link in links"
      :key="`${link.label}-header-link`"
      variant="text"
      rounded
      :to="link.url"
    >
      {{ link.label }}
    </v-btn>
  </v-app-bar>
</template>

<script>
export default {
  name: "header",
  setup() {
    const links = [
      {
        label: "首页",
        url: "/",
      },
      {
        label: "登录",
        url: "/login",
      },
      {
        label: "控制面板",
        url: "/dashboard",
      },
    ];
    return { links };
  },
};
</script>
